<template>
  <div>
    <van-tabs v-model="active" title-active-color="red">
     <van-tab title="待使用 9">
    <van-dropdown-menu active-color="red" >
    <van-dropdown-item v-model="value1" :options="option1" />
    <van-dropdown-item v-model="value2" :options="option2" />
    <van-dropdown-item v-model="value2" :options="option3" />
    </van-dropdown-menu>
    <div class="box" v-for="(v,index) in arr" :key="index">
    <div class="top"></div>
    <div class="bottom">
        <div class="left">
            <div class="left-top">
                <span class="s1">￥</span>
            <span class="s2">{{v.nums}}</span>
            </div>
            <p>满6元可用</p>
        </div>
        <div class="right">
            <div class="dv1">{{v.lx}}</div>
            <p class="dv2">{{v.typ}}</p>
            <p class="dv3">{{v.tim}}</p>
            <div class="dv4">去使用</div>
            <div class="dv5">
                <p>详细信息</p>
                <van-icon name="arrow-down" size="16px"/>
            </div>
        </div>
        
    </div>
    
</div>
<div class="boxx">
    <p class="boxx1">
    使用兑换码兑换优惠券
</p></div>
  </van-tab>
  <van-tab title="已使用 7">
   <div class="box" v-for="(v,index) in arr1" :key="index">
    <div class="top"></div>
    <div class="bottom">
        <div class="left">
            <div class="left-top">
                <span class="s1">￥</span>
            <span class="s2">{{v.nums}}</span>
            </div>
            <p>满6元可用</p>
        </div>
        <div class="right">
            <div class="dv1">{{v.lx}}</div>
            <p class="dv2">{{v.typ}}</p>
            <p class="dv3">{{v.tim}}</p>
            <div class="dv4">已使用</div>
            <div class="dv5">
                <p>详细信息</p>
                <van-icon name="arrow-down" size="16px"/>
            </div>
        </div>
        
    </div>

</div>
  </van-tab>
  <van-tab title="已过期 8">
    <div class="box" v-for="(v,index) in arr2" :key="index">
    <div class="top"></div>
    <div class="bottom">
        <div class="left">
            <div class="left-top">
                <span class="s1">￥</span>
            <span class="s2">{{v.num}}</span>
            </div>
            <p>满6元可用</p>
        </div>
        <div class="right">
            <div class="dv1">{{v.lx}}</div>
            <p class="dv2">{{v.typ}}</p>
            <p class="dv3">{{v.tim}}</p>
            <div class="dv4">已过期</div>
            <div class="dv5">
                <p>详细信息</p>
                <van-icon name="arrow-down" size="16px"/>
            </div>
        </div>
        
    </div>

</div>
  </van-tab>
  <van-tab title="管理" @click="fun">
    <div class="op" v-if="flag">
        <div class="op1"></div>
        <p class="op2">全选</p>
        <p class="op3">取消</p>
        <div class="op4">批量删除(0)</div>
    </div>
  </van-tab>
</van-tabs>
  </div>
</template>

<script>
import axios from "axios"
let service = axios.create()
export default {
    mounted(){
        service({
            url:"http://localhost:3000/lhcupono",
            method:"get"
            }).then(res=>{
            this.arr = res.data
         }),
         service({
            url:" http://localhost:3000/lhcupont",
            method:"get"
            }).then(res=>{
            this.arr1 = res.data
         }),
         service({
            url:"http://localhost:3000/lhcuponth",
            method:"get"
            }).then(res=>{
            this.arr2 = res.data
         })
  },
    data() {
    return {
    flag:false,
    arr:[],
    arr1:[],
    arr2:[],
    active:0,
      value1: 0,
      value2: 'a',
      option1: [
        { text: '类型', value: 0 },
        { text: '全部类型', value: 1 },
        { text: '京券', value: 2 },
        { text: '东券', value: 3 },
        { text: '运费券', value: 4 },
        { text: '快递券', value: 5 },
        { text: '白条券', value: 6 },
        { text: '支付券', value: 7 },
        { text: '回收券', value: 8 },
      ],
      option2: [
        { text: '状态', value: 'a' },
        { text: '全部状态', value: 'b' },
        { text: '新到', value: 'c' },
        { text: '快过期', value: 'd' },
      ],
      option3: [
        { text: '优惠力度', value: 'a' },
        { text: '默认排序', value: 'b' },
        { text: '从高到低', value: 'c' },
        { text: '从低到高', value: 'd' },
      ],
    };
  },
  methods:{
    fun () {
        this.flag = !this.flag
    }
  }
}
</script>

<style scoped>
    .van-dropdown-menu__title {
        font-size: 12px;
        color: blue;
    }

    .box {
        width: 100%;
        height: auto;
        background-color: #eee;
        overflow: hidden;
    }
   

    .top {
        width: 96%;
        height: 6px;
        margin: auto;
        background: #53c7ca;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        margin-top: 30px;
    }
    .bottom {
        width: 96%;
        height: 134px;
        margin: auto;
        background-color: #fff;
        display: flex;
    }
    .left {
        width: 127px;
        height: 134px;
        text-align: center;
        overflow: hidden;
    }
    .left .s1 {
        font-size: 14px;
        color: #53C7CA;
        font-weight: bold;
        
    }
    .left .s2 {
        font-size: 36px;
        color: #53C7CA;
        font-weight: bold;
    }
    .left p {
        font-size: 12px;
        color: #53C7CA;
    }
    .left-top {
        margin-top: 30px;
    }

    .right {
        width: 228px;
        height: 134px;
    }
    .dv1 {
        width: 40px;
        height: 14px;
        background-color: #53C7CA;
        font-size: 12px;
        color: #fff;
        text-align: center;
        line-height: 13px;
        margin-top: 10px;
        float: left;
    }
    .dv2 {
        font-size: 12px;
        color: #666666;
        margin-top: 10px;
    }
    .dv3 {
        color: #ff4142;
        font-size: 12px;
        margin-top: 40px;
    }
    .dv4 {
        width: 66px;
        line-height: 20px;
        border-radius: 15px;
        color: #fff;
        background-color: #53C7CA;
        font-size: 12px;
        text-align: center;
        margin-left: 150px;
        margin-top: -30px; 
    }
    .dv5 {
        height: 40px;
        font-size: 12px;
        color: #999999;
        border-top: 1px dashed #eee;
        margin-top: 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .boxx {
        width: 100%;
        height: 200px;
        background-color: #eee;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .boxx1 {
        width: 190px;
        line-height: 42px;
        /* background-color: #fff; */
        color: #E93B3D;
        font-size: 14px;
        text-align: center;
        border-radius: 20px;
        border: 1px solid #E93B3D;
    }

    .op {
        width: 100%;
        height: 45px;
        border-top: 1px solid #eee;
        display: flex;
        position: fixed;
        bottom: 0;
        right: 0;
        align-items: center;
    }
    .op1 {
        width: 18px;
        height: 18px;
        border: 1px solid #c9c9c9;
        border-radius: 50%;
        margin-left: 20px;
    }
    .op2 {
        font-size: 14px;
        color: #666666;
        margin-left: 10px;
    }
    .op3 {
        font-size: 14px;
        color: #666666;
        margin-left: 130px;
    }
    .op4 {
        width: 104px;
        height: 32px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-image: linear-gradient(0deg,#ff4142,#ff4b2b);
        box-shadow: 0 0 0.5rem #d3d3d3;
        opacity: 0.5;
        border-radius: 30px;
        color: #fff;
        font-size: 14px;
        margin-left: 20px;
    }
</style>